Navigating TypeScript: 'import' vs 'import type'

Introduction:

React30 is an exciting initiative that challenges developers to build 30 different React projects in 30 days. In this exclusive article, we will guide you through the first project of the React30 series - the ID Card Generator. This project is a great starting point for beginners to get hands-on experience with React while creating a useful and fun application.

Prerequisites: Before diving into the project, make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can download and install them from the official website: Node.js.

Step 1: Set Up Your React App: Open your terminal and run the following command to create a new React app using Create React App:

npx create-react-app id-card-generator

This command will create a new directory called id-card-generator with the basic structure of a React app.

Step 2: Navigate to Your Project Directory: Move into your newly created project directory:

cd id-card-generator

Step 3: Clean Up Unnecessary Files: Remove the unnecessary files from the src directory:

cd src rm -f App.test.js App.css index.css logo.svg serviceWorker.js setupTests.js

Step 4: Create Components: Inside the src directory, create a new directory called components. Inside the components directory, create the following files:

• Header.js: For the header of the ID card.
• Form.js: To capture user input for the ID card.
• Card.js: To display the generated ID card.

Step 5: Implement Header Component: Open Header.js and implement a simple header for your application. You can use functional components for simplicity.

// Header.js import React from 'react'; const Header = () => { return ( <header> <h1>ID Card Generator</h1> </header> ); }; export default Header;

Step 6: Implement Form Component: Open Form.js and create a form that captures the necessary information for the ID card. You can use the useState hook to manage the form data.

// Form.js

import React, { useState } from 'react';

const Form = () => {

  const [formData, setFormData] = useState({

    firstName: '',

    lastName: '',

    photoURL: '',

    // Add more fields as needed

  });

  const handleChange = (e) => {

    const { name, value } = e.target;

    setFormData({ ...formData, [name]: value });

  };

  return (

    <form>

      <label>

        First Name:

        <input

          type="text"

          name="firstName"

          value={formData.firstName}

          onChange={handleChange}

        />

      </label>

      {/* Add similar input fields for other information */}

      <button type="submit">Generate ID Card</button>

    </form>

  );

};

export default Form;

Step 7: Implement Card Component: Open Card.js and create a component that displays the information captured from the form.

// Card.js import React from 'react'; const Card = ({ data }) => { return ( <div className="id-card"> <img src={data.photoURL} alt="User" /> <h2>{`${data.firstName} ${data.lastName}`}</h2> {/* Display other information */} </div> ); }; export default Card;

Step 8: Integrate Components in App.js: Open App.js and integrate the header, form, and card components.

// App.js import React from 'react'; import Header from './components/Header'; import Form from './components/Form'; import Card from './components/Card'; const App = () => { return ( <div> <Header /> <Form /> {/* Conditionally render the Card component */} </div> ); }; export default App;

Step 9: Add Styling: Style your components using CSS or a styling solution of your choice. You can create a basic CSS file for each component and import them into the respective components.

Step 10: Test Your App: Run your React app using the following command:

npm start

Open your browser and navigate to http://localhost:3000 to see your ID Card Generator in action.

Congratulations! You've successfully completed the first project of the React30 series. This project provides a solid foundation for building more complex React applications in the future. Stay tuned for the next projects in the React30 challenge!